import React, {useEffect, useState} from 'react';
import {
  AppBar,
  Toolbar,
  Typography,
  Container,
  TextField,
  List,
  CircularProgress, Box
} from '@mui/material';
import {IndexInvestor, PortfileAsset} from "./investor/investor";
import data from "./data/imoex.json";
import {Asset} from "./components/Asset/Asset";

function App() {
  const [isLoading, setIsLoading] = useState<boolean>(false)
  const [assets, setAssets] = useState<PortfileAsset[]>([])

  const getAssets = (capital: number) => {
    setIsLoading(true)
    IndexInvestor.of(data).getAssets(capital)
        .then((res: PortfileAsset[]) => setAssets(res))
        .catch(err => console.log(err))
        .finally(() => setIsLoading(false))
  }

  useEffect(() => {
    getAssets(200000)
  }, [])
  
  return (
    <div>
      <AppBar position="static">
        <Toolbar>
          <Typography variant="h6">
            IndexInvestor
          </Typography>
        </Toolbar>
      </AppBar>
      <Container>
        <Typography variant="h5" gutterBottom style={{ marginTop: '20px' }}>
          Мой капитал
        </Typography>
        <TextField
          variant="outlined"
          fullWidth
          label="Введите ваш капитал"
          placeholder="Например, 10000"
          style={{ marginBottom: '20px' }}
        />
        {isLoading
            ? <Box display="flex" justifyContent="center" alignItems="center" height="100px">
              <CircularProgress />
            </Box>
            : <List>
              {assets?.map(asset =>
                  <Asset code={asset.code} price={asset.price} count={asset.count}/>)
              }
            </List>
        }
      </Container>
    </div>
  );
}

export default App;
